<template>
    <div class="page dealEmergencyApply-page" data-page="ranking" >
        <div class="link-page-nav">
            <a href="#" class="link" @click=$root.backToTab()>
                <i class="iconfont icon-zuo"></i>
            </a>
        </div>
        <div class="link-page-top" style="padding-bottom: 17px;">
            <div class="link-page-title">排行榜
                <p class="result-name">考试名称考试名称考试名称考试名称</p>
            </div>
        </div>
        <div class="page-content">
            <div class="exam-content">
                <div class="ranking-details">
                    <div class="own">

                    </div>
                    <ul class="ranking-list" id="ranking_{{getNewId}}">

                    </ul>

                </div>
                <div class="tip">
                    <p>注意：排名实时更新</p>

                </div>
            </div>
        </div>
    </div>
</template>
<script>
    return {
        data() {
            return {
                getNewId: (new Date()).getTime(),
            }
        },
        mounted() {
            let params = { examId: this.$route.params.id }
            let self = this
            Dao.getExamDetailRankingByExamId(params, function (res) {
                let html = ''
                for (let i = 0; i < res.length; i++) {
                    html += `<li>
                                <div class="listIndex">${i + 1}</div>
                                <img src="${res[i].examAccountIcon==''?staticPath + 'img/mine/defaulticon.png':res[i].examAccountIcon}">
                                <div class="listMiddle">
                                    <p>${res[i].examAccountName}</p>
                                    <p>当前排名 ${res[i].ranking}</p>
                                </div>
                                <div class="listScore ${res[i].passLine <= res[i].score ? 'passscore' : ''}">${res[i].score}<span>分</span>  </div>
                            </li>`
                    if (res[i].examAccount == userInfor.accountName) {
                        $('.result-name').text(res[i].name)
                        jQuery('.own').html(`  <img src="${res[i].examAccountIcon==''?staticPath + 'img/mine/defaulticon.png':res[i].examAccountIcon}" alt="" width="64" height="64" style="border-radius:50%">
                                <div class="own-middle">
                                    <p>${res[i].examAccountName}</p>
                                    <p>当前排名 ${res[i].ranking}</p>
                                </div>
                                <div class="own-score ${res[i].passLine <= res[i].score ? 'passscore' : ''}">${res[i].score}<span>分</span>  </div>`)
                    }
                }
                jQuery(`#ranking_${self.getNewId}`).append(html)

            })
        },
    }
</script>
<style scoped>
    .exam-content {
        padding: 20px;
    }

    .link-page-title p {
        font-size: 16px;
        ;
    }

    .exam-details {
        background-color: #fff;
        border: 1px solid rgba(225, 225, 225, 0.9);
        box-shadow: 0px 1px 10px 0px rgba(181, 200, 206, 0.5);
        border-radius: 6px;
        text-align: center;
        padding: 20px;
    }

    .exam-details img {
        width: 60px;
        height: 60px;
        border-radius: 50%;
    }

    .ranking-list li,
    .own {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 20px 0;
    }

    .ranking-list li img {
        width: 44px;
        height: 44px;
        margin: 0 20px;
        border-radius: 50%;
        ;
    }

    .listIndex {
        width: 20px;
        text-align: center;
    }

    .listMiddle {
        flex: 1;
    }

    .listScore {
        font-size: 24px;
        color: rgba(224, 119, 98, 1);
        ;
    }

    .listScore span {
        font-size: 16px;
    }

    .own {
        border: 1px solid rgba(225, 225, 225, 0.9);
        box-shadow: 0px 1px 10px 0px rgba(181, 200, 206, 0.5);
        border-radius: 6px;
        text-align: center;
        padding: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .own-middle {
        flex: 1;
        text-align: left;
        text-indent: 20px;
    }

    .own-middle p:nth-child(1) {
        font-weight: bold;
        color: #000000;
        font-size: 16px;
    }

    .own-middle p:nth-child(2) {

        color: rgba(0, 0, 0, .8);
        font-size: 14px;
    }

    .own-score {
        font-size: 34px;
        color: rgba(224, 119, 98, 1);
        ;
    }

    .own-score span {
        font-size: 16px;
    }

    .tip {
        color: rgba(224, 119, 98, 1);
        font-size: 14px;
        text-align: center;
        ;
    }

    .passscore.own-score,
    .listScore.passscore {
        color: #69BA71;
    }
</style>